<template>
  <div>
    <BasicModal
      @register="ruleRegisterModal"
      v-bind="$attrs"
      :helpMessage="['提示1', '提示2']"
      @ok="addRule"
    >
      <BasicForm @register="ruleRegisterForm" />
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { addTheRule } from '/@/api/thingsborad/rule/rule';
  import { getTheRuleInfo } from '/@/api/thingsborad/rule/rule';
  import { ref } from 'vue';
  import { modalFormStyleSetting, modalStyleSetting } from '/@/settings/thingsBoardDesign';
  const emits = defineEmits(['closeAddRuleFalg']);
  // 数据存储
  let ruleData = ref<any>();
  //开发弹窗方式
  let isEdit = ref<boolean>(false);

  let addSchemas: FormSchema[] = [
    {
      field: 'addRuleName',
      component: 'Input',
      label: '名称',
      required: true,

      componentProps: {
        placeholder: '请输入规则链名称',
      },
    },
    {
      field: 'ruleCheckboxGroup',
      component: 'CheckboxGroup',
      label: '',
      colProps: {
        span: 24,
      },
      componentProps: {
        options: [{ value: '调试模式', label: '调试模式' }],
      },
    },
    {
      field: 'describe',
      component: 'InputTextArea',
      label: '说明',
      colProps: {
        span: 24,
      },
      componentProps: {
        placeholder: '请输入说明',
      },
    },
  ];
  const [ruleRegisterForm, { validate, resetFields, setFieldsValue }] = useForm({
    layout: 'vertical',
    schemas: addSchemas,
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
    showSubmitButton: true,
    showResetButton: false,
    ...modalFormStyleSetting,
  });
  const [ruleRegisterModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
    resetFields();
    //初始化数据
    if (data !== true) {
      const theRuleInfo = await getTheRuleInfo(data.id);
      ruleData.value = theRuleInfo;
      isEdit.value = true;
      let describe: string;

      if (theRuleInfo.additionalInfo === null) {
        describe = '';
      } else {
        describe = theRuleInfo.additionalInfo.description;
      }

      setFieldsValue({
        addRuleName: theRuleInfo.name,
        type: theRuleInfo.type,
        ruleCheckboxGroup: theRuleInfo.debugMode === true ? '调试模式' : 'null',
        describe: describe,
      });
    } else {
      isEdit.value = false;
    }
    setModalProps({
      loading: false,
      confirmLoading: false,
      ...modalStyleSetting,
    });
  });

  //添加规则
  async function addRule() {
    try {
      const inputValue = await validate();
      let data: any;
      //字段填充
      if (isEdit.value) {
        ruleData.value.name = inputValue.addRuleName;
        ruleData.value.debugMode = inputValue.ruleCheckboxGroup === undefined ? 'null' : true;
        ruleData.value.additionalInfo = {
          description: inputValue.describe,
        };
        data = ruleData.value;
      } else {
        data = {
          name: inputValue.addRuleName,
          debugMode: inputValue.ruleCheckboxGroup === undefined ? 'null' : true,
          additionalInfo: {
            description: inputValue.describe,
          },
          type: 'CORE',
        };
      }

      await addTheRule(data);
      resetFields();
      emits('closeAddRuleFalg', true);
      closeModal();
    } catch (error) {}
  }
</script>
